// main.js
import {userManagementContent} from './user.js';

$(document).ready(function () {
    const $sidebarLinks = $('.sidebar-menu li a');
    const $mainContent = $('.main-content');

    $sidebarLinks.on('click', function (event) {
        event.preventDefault(); // 防止默认链接行为
        if ($(this).text().trim() === '用户管理') {
            $mainContent.html(userManagementContent); // 更新内容为用户管理的内容
            renderTable();
        } else {
            // 处理其他页面内容
            $mainContent.html('<h2>欢迎使用企业管理系统</h2><p>请选择左侧菜单以开始。</p>');
        }
    });

    // 使用事件委托来处理用户管理表格中的按钮点击
    $mainContent.on('click', '.edit', function () {
        const userId = $(this).closest('tr').find('td:first').text(); // 获取用户ID
        openAddModel();
    });

    $mainContent.on('click', '.delete', function () {
        const userId = $(this).closest('tr').find('td:first').text(); // 获取用户ID
        deleteData(userId);
    });

});


    // 模拟数据存储
    let data = [
    {id: 1, name: '张三', email: 'zhangsan@example.com', age: 25, gender: '男'},
    {id: 2, name: '李四', email: 'lisi@example.com', age: 30, gender: '女'},
    {id: 3, name: '王五', email: 'wangwu@example.com', age: 28, gender: '男'}
    ];


    // 渲染表格数据
function renderTable(filteredData = null) {

    const tableBody = document.getElementById('tableBody');
    //tableBody.innerHTML = '';
    let html='';
    const displayData = filteredData || data;

    /*  if (displayData.length === 0) {
        tableBody.innerHTML = '<tr><td colspan="6" style="text-align: center;">没有数据</td></tr>';
        return;
      }*/

    displayData.forEach(item => {
    //const row = document.createElement('tr');

    html += `   <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.email}</td>
                    <td>${item.age}</td>
                    <td>${item.gender}</td>
                    <td class="action-buttons">
                        <button class="edit" onclick="openEditModal(${item.id})">编辑</button>
                        <button class="delete" onclick="deleteData(${item.id})">删除</button>
                    </td></tr>
                `;

});
    console.log(html);
    $('#tableBody').html(html);
}


function openAddModel(){
    document.getElementById('addModal').style.display = 'block';
}




// 添加数据
function addData() {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const age = document.getElementById('age').value;
    const gender = document.getElementById('gender').value;

    if (!name || !email || !age) {
        alert('请填写所有必填字段');
        return;
    }

    // 生成新ID
    const newId = data.length > 0 ? Math.max(...data.map(item => item.id)) + 1 : 1;

    const newItem = {
        id: newId,
        name: name,
        email: email,
        age: parseInt(age),
        gender: gender
    };

    data.push(newItem);
    renderTable();
    clearForm();
    alert('添加成功');
}

// 清空表单
function clearForm() {
    document.getElementById('name').value = '';
    document.getElementById('email').value = '';
    document.getElementById('age').value = '';
    document.getElementById('gender').value = '男';
}

// 删除数据
function deleteData(id) {
    if (confirm('确定要删除这条数据吗？')) {
        data = data.filter(item => item.id !== id);
        renderTable();
        alert('删除成功');
    }
}

// 打开编辑模态框
function openEditModal(id) {
    const item = data.find(item => item.id === id);
    if (!item) return;

    document.getElementById('editId').value = item.id;
    document.getElementById('editName').value = item.name;
    document.getElementById('editEmail').value = item.email;
    document.getElementById('editAge').value = item.age;
    document.getElementById('editGender').value = item.gender;

    document.getElementById('editModal').style.display = 'block';
}

// 关闭模态框
function closeModal() {
    document.getElementById('editModal').style.display = 'none';
    document.getElementById('addModal').style.display = 'none';
}

// 更新数据
function updateData() {
    const id = parseInt(document.getElementById('editId').value);
    const name = document.getElementById('editName').value;
    const email = document.getElementById('editEmail').value;
    const age = document.getElementById('editAge').value;
    const gender = document.getElementById('editGender').value;

    if (!name || !email || !age) {
        alert('请填写所有必填字段');
        return;
    }

    const index = data.findIndex(item => item.id === id);
    if (index !== -1) {
        data[index] = {
            id: id,
            name: name,
            email: email,
            age: parseInt(age),
            gender: gender
        };

        renderTable();
        closeModal();
        alert('更新成功');
    }
}

// 搜索数据
function searchData() {
    const keyword = document.getElementById('searchInput').value.toLowerCase();

    if (!keyword) {
        renderTable();
        return;
    }

    const filteredData = data.filter(item =>
        item.name.toLowerCase().includes(keyword) ||
        item.email.toLowerCase().includes(keyword) ||
        item.gender.toLowerCase().includes(keyword) ||
        item.age.toString().includes(keyword) ||
        item.id.toString().includes(keyword)
    );

    renderTable(filteredData);
}

// 点击模态框外部关闭模态框
window.onclick = function(event) {
    const modal = document.getElementById('editModal');
    if (event.target === modal) {
        closeModal();
    }
}






